<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title th:text="${config.getWebname()}+' - 纯粹的图片存放驿站'"></title>
<!--    <meta name="description" content="免费纯粹的图片存放驿站。"/>-->
<!--    <meta name="Keywords" content="hellohao图床,hellohao,图床,纯粹的图床站,免费图床"/>-->
<!--    <link rel=”canonical” href=”http://tc.hellohao.cn/”/>-->
    <link rel="shortcut icon" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico" type="image/x-icon"/>
    <link rel="icon" type="image/ico" href="https://hellohao.nos-eastchina1.126.net/BlogImg/favicon.ico">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/toastr.min.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/login-register.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/static/css/sweetalert.min.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/webuploade/css/webuploader.css}" media="all" rel="stylesheet" type="text/css"/>
    <link th:href="@{/webuploade/css/style.css}" media="all" rel="stylesheet" type="text/css"/>

    <script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/toastr.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/login-register.js}"></script>
    <script th:src="@{/static/js/clipboard.min.js}"></script>
    <script th:src="@{/static/js/bootbox.min.js}"></script>
    <script th:src="@{/static/js/sweetalert.min.js}"></script>
    <script th:src="@{/static/js/webuploader.js}"></script>
    <script type="text/javascript" src="https://api.guoch.xyz/?code=js&charset=utf-8"></script>
    <script th:src="@{/webuploade/js/upload.js}" type="text/javascript"></script>
<!--    <script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>-->

    <!-- 样式 -->
    <style type="text/css">
        .kv-main {
            padding: 46px;
            /*margin-top: 5%;*/
        }
        #page-header {
            width: 80%;
            height: 50px;
            padding: 10px;
            margin-top: 5%;
            margin: 0 auto;
        }

        pre {
            color: #000;
            line-height: 16px;
            font-size: 13px;
            font-weight: bold;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        #page-header {
            line-height: 2.5em;
            font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
            font-size: 18px;
            color: #333;
        }
        .dmk{
            color: #2b542c;
            font-weight: 600;
            font-family: Consolas;
            margin-left: 50px;
            background-color: #dff0d8
        }
    </style>

</head>
<body id="copyimage">
<div th:include="header::header"></div>

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5 style="color:black"> <strong style="color: #FFFFFF;">正在上传图片，请稍等。</strong> </h5>
    </div>
</div>


<div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong>警告！</strong>您的网络连接有问题。
</div>

<div class="container" th:if=" ${config.getNotice()} != ''">
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        <li class="glyphicon glyphicon-exclamation-sign">&nbsp;</li>
        <span th:text="${config.getNotice()}"></span>
    </div>
</div>
<div id="page-header" class="container kv-main jb">
    <FONT face="Yu Gothic UI" color=#333 size=9>良言：</FONT>
</div>
<div class="container kv-main">
    <div class="jb" style="width: 80%;height: auto;  margin-left: 100px;font-size: 1.5em;">
        &nbsp;&nbsp;&nbsp;&nbsp;<FONT face="Yu Gothic UI" color=rgb(58, 54, 54) size=5>『</FONT>&nbsp;&nbsp;&nbsp;<span
            id="saying" style="font-family: 'Yu Gothic UI'"><script>saying()</script></span>&nbsp;&nbsp;<FONT
            face="Yu Gothic UI" color=rgb(58, 54, 54) size=5>』</FONT>
    </div>
    <hr/>
    <br/>
    <br/>
    <div>
        <FONT color=#737373 size=3 th:text="'图片大小不得超过'+${uploadConfig.getFilesizetourists()}+' MB，登录本站可上传'+${uploadConfig.getFilesizeuser()}+' M图片以及查看历史图片记录等更多操作。'"></FONT>
        <button onclick="urlimg()" type="button" class="btn btn-primary btn-xs" style="float: right;margin-right: 15px;background-color: #00b7ee;border-color: #00b7ee;font-size: 14px;">通过图片URL上传</button>

    </div>

    <br>
    <form enctype="multipart/form-data">
<!--        <div class="form-group">-->
<!--图片上传模板-->
            <div id="wrapper">
                <div id="container">
                    <!--头部，相册选择和格式选择-->
                    <div id="uploader">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <br />
                                <span class="text">您也可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴。</span>
                                <div id="filePicker"></div>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div><div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<!--        </div>-->
    </form>
</div>
<!-- 生成图片外接的代码 style="display: none;" -->
<div class="container" id="address" style="display: none;" >
    <div class="form-group">
        <label style="font-weight: bold;">URL外链地址：</label>&nbsp;
        <a style="display: block;width: 50px;float: right;" onclick="copy(1)" class="btn btn-info btn-xs">复制</a>
        <div  class="alert alert-success" role="alert" style="margin-top: 10px;"><pre id="urls" class="dmk"></pre></div>
        <label style="font-weight: bold;">Markdown外链地址：</label>
        <a style="display: block;width: 50px;float: right;" onclick="copy(2)" class="btn btn-info btn-xs">复制</a>
        <div  class="alert alert-success" role="alert" style="margin-top: 10px;"><pre id="markdowns" class="dmk"></pre></div>
        <label style="font-weight: bold;">HTML外链地址：</label>&nbsp;
        <a style="display: block;width: 50px;float: right;" onclick="copy(3)" class="btn btn-info btn-xs">复制</a>
        <div  class="alert alert-success" role="alert" style="margin-top: 10px;"><pre id="htmls" class="dmk"></pre></div>
    </div>
</div>
<!-- 登录注册框 -->
<div class="modal fade login" id="loginModal">
    <div class="modal-dialog login animated">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">系统登录</h4>
            </div>
            <div class="modal-body">
                <div class="box">
                    <div class="content">
                        <div class="social">
                            <p id="biaoti" class="circle github">
                                系统登录
                            </p>

                        </div>
                        <div class="division">
                            <div class="line l"></div>
                            <span>-</span>
                            <div class="line r"></div>
                        </div>
                        <div class="error"></div>
                        <div class="form loginBox">
                            <form id="login" method="post" accept-charset="UTF-8">
                                <input id="loginemail" class="form-control" type="text" placeholder="邮箱" name="email">
                                <input id="loginpassword" class="form-control" type="password" placeholder="密码"
                                       name="password">
                                <input id="login-btn" data-toggle="dropdown"
                                       class="btn btn-default btn-login dropdown-toggle" type="button" value="登录"
                                       onclick="loginAjax()">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="content registerBox" style="display:none;">
                        <div class="form">
                            <form method="post" data-remote="true" accept-charset="UTF-8">
                                <div style="font-size: 13px;">
                                        <span> ●用户名注册后不能修改<br/>
                                         ●邮箱激活链接如果没有请在【垃圾箱】查找</span>
                                </div>
                                <hr/>
                                <input id="registerusername" class="form-control" type="text"
                                       placeholder="用户名(数字/字母不得超过10位)"
                                       name="username">
                                <input id="registeremail" class="form-control" type="text" placeholder="邮箱"
                                       name="email">
                                <input id="registerpassword" class="form-control" type="password" placeholder="密码"
                                       name="password">
                                <input id="registerpassword_confirmation" class="form-control" type="password"
                                       placeholder="重复密码" name="password_confirmation">
                                <input class="btn btn-default btn-register" type="button" value="创建账户" name="commit"
                                       onclick="ismail();">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="forgot login-footer">
                            <span>你希望 
                                 <a href="javascript: showRegisterForm();">创建一个帐户</a>
                            ?</span>
                </div>
                <div class="forgot register-footer" style="display:none">
                    <span>已经有一个帐户吗?</span>
                    <a href="javascript: showLoginForm();">登录</a>
                </div>
            </div>
        </div>
    </div>

</div>

<footer class="footer " th:include="footer::foot"></footer>
</body>
<script th:inline="javascript">

    var loginid = [[${loginid}]];
    var filesize = [[${filesize}]];
    var imgcount = [[${imgcount}]];
    var suffix = [[${suffix}]];
    $(document).ready(function () {
        $(".jb").fadeToggle();
        //$("#page-header").fadeToggle("slow");
        $(".jb").fadeToggle(4000);
    });

    if (window != top){top.location.href = location.href;}

    $(function () {
/*
//一言
        $.ajax({
            type: "GET",
            url: "/getsentence",
            dataType: "json",
            success: function (data) {
                console.log(data)
                alert(data.hitokoto);
            }
        });
*/
        //设置页面资料
        var webname = [[${config.getWebname()}]];
        var explain = [[${config.getExplain()}]];
        var footeds = [[${config.getFooted()}]];
        var links = [[${config.getLinks()}]];
        var logos = [[${config.getLogos()}]];
        $("#webname").text(webname);
        $("#explain").text(explain);
        $("#footeds").text(footeds);
        $("#links").html(links);
        $("#logos").attr('src', logos);

        $.ajax({
            type: "POST",
            url: "/islogin",
            dataType: "json",
            success: function (data) {
                if(data.lgoinret==1){
                    var username = data.username;
                    var isvip = data.level;
                    var h = '<li><a  target="_blank" id="usernames" >' + times() + username + '&nbsp;<img style=" margin-top:-6px;width:22px; height:22px;max-width:90%;max-height:90%;" src="/static/img/vip/Vip' + isvip + '.png" /></a></li>';
                    var h1 = '<li><a style="font-weight: bold;" target="_blank" href="/admin/goadmin" id="usernames" >控制面板&nbsp;</a></li>';
                    var h2 = '<li><a href="javascript:exit();" title="666" onclick="">退出</a></li>';
                    $("#usersrc").html(h + h1 + h2);
                }
            }
        });

        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options = {
            closeButton: true,//是否显示关闭按钮
            debug: false,
            progressBar: true,
            positionClass: "toast-bottom-right",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
        toastr.info("欢迎使用Hellohao图床！");
        // if (loginid == 100) {
        //     var username = [[${username}]];
        //     var isvip = [[${level}]];
        //     var h = '<li><a  target="_blank" id="usernames" >' + times() + username + '&nbsp;<img style=" margin-top:-6px;width:22px; height:22px;max-width:90%;max-height:90%;" src="/static/img/vip/Vip' + isvip + '.png" /></a></li>';
        //     var h1 = '<li><a style="font-weight: bold;" target="_blank" href="/admin/goadmin" id="usernames" >控制面板&nbsp;</a></li>';
        //     var h2 = '<li><a href="javascript:exit();" title="666" onclick="">退出</a></li>';
        //     $("#usersrc").html(h + h1 + h2);
        // }
    });
    var arr_url = "";
    var arr_markdown = "";
    var arr_html = "";
    //上传文件个数，默认单上传
    //异步上传返回结果处理


    function zhuce(mail, registerusername, registerpassword) {
        //验证成功
        $.ajax({
            type: "POST",
            url: "/user/register",
            data: {email: mail, username: registerusername, password: registerpassword},
            dataType: "json",
            success: function (data) {
                if (data.ret > 0) {
                    if (data.zctype == 1) {
                        swal({
                                title: "注册成功",
                                text: "请前往邮箱激活你的账号，注意！激活邮件如果迟迟未收到，有可能在您的【垃圾箱】中。",
                                type: "success",
                                showCancelButton: false,//true显示两个按钮
                                confirmButtonColor: "#A5DC86",
                                confirmButtonText: "知道了",
                                //cancelButtonText: "取消删除！",
                                closeOnConfirm: true,
                                closeOnCancel: false
                            },
                            function (isConfirm) {
                                if (isConfirm) {
                                    openLoginModal();
                                } else{}
                            });
                    } else {
                        swal({
                                title: "注册成功",
                                text: "赶快登录去体验吧。",
                                type: "success",
                                showCancelButton: false,//true显示两个按钮
                                confirmButtonColor: "#A5DC86",
                                confirmButtonText: "知道了",
                                closeOnConfirm: true,
                                closeOnCancel: false
                            },
                            function (isConfirm) {
                                if (isConfirm) {
                                    openLoginModal();
                                } else {}
                            });
                    }

                } else {
                    if (data == -2) {
                        toastr.error('用户名或邮箱重复且用户名只能为字母数字，请重试。');
                    } else {
                        toastr.error('注册失败，请重试。');
                    }
                    setTimeout(function () {
                    }, 3000);
                }
            }
        });
    }

    //登录
    function loginAjax() {
        var loginemail = $("#loginemail").val();
        var loginpassword = $("#loginpassword").val();
        //验证成功
        $.ajax({
            type: "POST",
            url: "/user/login.do",
            data: {email: loginemail, password: loginpassword},
            dataType: "json",
            success: function (data) {
                if (data == 1) {
                    toastr.success("登录成功。");
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000);
                } else {
                    if (data == -1) {
                        toastr.error('账号未进行邮箱验证，请先验证邮箱。');
                    } else {
                        toastr.error('登录失败，请重试。');
                    }
                    setTimeout(function () {
                        openLoginModal();
                    }, 2000);
                }
            }
        });
    }

    function exit() {
        $.ajax({
            type: "POST",
            url: "/user/exit.do",
            dataType: "json",
            success: function (data) {
                toastr.success("账号已退出。");
                window.location.reload();
            }
        });
    }

    function guanyu() {
        bootbox.alert("本站的主要功能基本上都完成了，在接下来的过程中我会进行代码优化，提高性能。如果你有什么好的功能意见可以来我博客进行评论。我也会尽力打造更加强大的图床站。<br /> Hellohao开发者交流群：864800972");
    }

    function times() {
        now = new Date(), hour = now.getHours()
        if (hour < 6) {
            return ("凌晨好！")
        } else if (hour < 9) {
            return ("早上好！")
        } else if (hour < 12) {
            return ("上午好！")
        } else if (hour < 14) {
            return ("中午好！")
        } else if (hour < 17) {
            return ("下午好！")
        } else if (hour < 19) {
            return ("傍晚好！")
        } else if (hour < 22) {
            return ("晚上好！")
        } else {
            return ("夜里好！")
        }
    }

    function copy(val) {
        var data = null;
        if (val == 1) {
            data = $('#urls').text();
        } else if (val == 2) {
            data = $('#markdowns').text();
        } else if (val == 3) {
            data = $('#htmls').text();
        } else {
            return;
        }
        var copy = new ClipboardJS('.btn', {
            text: function (trigger) {
                return data;
            }
        });
        copy.on('success', function (e) {
            toastr.success("复制成功");
            copy.off("success");
        });
        copy.on('error', function (e) {
            toastr.error("复制失败");
            copy.off("error");
        });
    }
    function loadScriptString(code) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        try {
            // firefox、safari、chrome和Opera
            script.appendChild(document.createTextNode(code));
        } catch (ex) {
            // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
            script.text = code;
        }
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    var baidu = [[${config.getBaidu()}]];
    loadScriptString(baidu);

    function urlimg() {
        var locale = {
            OK: 'I Suppose',
            CONFIRM: '上传',
            CANCEL: '取消'
        };
        bootbox.addLocale('custom', locale);
        bootbox.prompt({
            title: "输入图片完整URL地址:",
            locale: 'custom',
            callback: function (result) {
                    if(result) {
                        var rx=/^https?:\/\//i;
                        // alert(rx.test('http://xfdafefe'))
                        // alert(rx.test('https://xfdafefe'))
                        // alert(rx.test('bhttps://xfdafefe'))
                        if(rx.test(result)==true){
                            $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                            $.ajax({
                                type: "POST",
                                url: "/upurlimg",
                                dataType: "json",
                                data: {imgurl: result},
                                success: function (data) {
                                    for(var i=0;i<data.length;i++){

                                        if(data[i]==-1){
                                            // arr_url += '未配置存储源，请先后台配置存储源\r\n';
                                            // arr_markdown += '未配置存储源，请先后台配置存储源\r\n';
                                            // arr_html += '未配置存储源，请先后台配置存储源\r\n';
                                            $('#loadingModal').modal('hide');
                                            tanchuang('上传失败','未配置存储源，请先后台配置存储源','error');
                                        }
                                        else if(data[i]==-2){
                                            $('#loadingModal').modal('hide');
                                            tanchuang('上传失败','图片不存在或太大','error');
                                        }
                                        else if(data[i]==-3){
                                            $('#loadingModal').modal('hide');
                                            tanchuang('上传失败','文件类型不符合要求','error');
                                        }
                                        else if(data[i]==-4){
                                            $('#loadingModal').modal('hide');
                                            tanchuang('上传失败','该文件不支持上传','error');
                                        }
                                        else{
                                            $('#loadingModal').modal('hide');
                                            tanchuang('上传成功','该图片链接已成功上传','success');
                                            $("#address").css('display', 'block');
                                            arr_url += data[i] + '\r\n';
                                            arr_markdown += '![ ](' + data[i] + ')\r\n';
                                            arr_html += '<img src="' + data[i] + '" alt="Image" title="Image" /> \r\n';
                                        }
                                        $("#urls").text(arr_url);
                                        $("#markdowns").text(arr_markdown);
                                        $("#htmls").text(arr_html);
                                        urls = arr_url;
                                    }
                                }
                            });
                        }else{tanchuang('网址格式错误','网址必须以http(s)://开头。','error');}


                    }
            }
        });
    }

    function tanchuang(str1,str2,types) {
        swal({
            title: str1,
            text: str2,
            type: types,
            showCancelButton: false,//true显示两个按钮
            confirmButtonColor: "#A5DC86",
            confirmButtonText: "知道了",
            closeOnConfirm: true,
            closeOnCancel: false
        });
    }
</script>


</html>